<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive email layout.">
    <title>XXForm 答卷管理</title>
    <link rel="stylesheet" th:href="@{/css/pure-min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <script th:src="@{/js/vue-min.js}"></script>
    <script th:src="@{/js/main.js}"></script>
    <style>
        .input-radio {
            display: inline-block !important;
            margin-right: 10px !important;
        }
        .table button {
            margin-bottom: 5px;
        }
        .radio {
            display: inline-block !important;
            padding-top: .5em;
        }
        .pure-form p {
            padding:0 1em;
            margin-block-start: 0.5em;
            margin-block-end: 0.5em;
        }
    </style>
</head>
<body>

<div id="layout" class="content pure-g">

    <div th:include="home/_nav.html" id="nav" class="pure-u"></div>

    <div id="main" class="pure-u-1">
        <div class="content">
            <div class="content-header pure-g">
                <div class="pure-u-1-2">
                    <h1 class="content-title">答卷管理</h1>
                    <p class="content-subtitle">
                        问卷总数：<b class="count">{{allCount}}</b> 个
                    </p>
                </div>
                <div class="content-controls pure-u-1-2">
                    <form class="pure-form">
                        <fieldset>
                            <input type="text" class="pure-input" placeholder="搜索..." v-model="keyword" />
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="content-body">
                
                <table class="pure-table pure-table-bordered" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>问卷信息</th>
                            <th>答卷内容</th>
                            <th>时间</th>
                            <th style="width: 90px;">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in dataList">
                            <td>{{item.id}}</td>
                            <td>
                                <span>{{item.paper.title}}</span><br>
                                <small style="color: #666;">提交人：<b>{{item.name}}</b>&nbsp;&nbsp;&nbsp;联系方式：<b>{{item.phone}}</b></small>
                            </td>
                            <td>
                                <span v-if="item.spread" >
                                    <small v-for="a in item.answers">
                                        <b>{{a.num}}.{{a.title}}</b><br>
                                        回答：<span class="orange">{{a.content}}</span><br>
                                    </small>
                                </span>
                                <small v-else>
                                    <b>{{item.answers[0].num}}.{{item.answers[0].title}}</b><br>
                                    回答：<span class="orange">{{item.answers[0].content}}</span>
                                </small>
                                <br>
                                <small>
                                    <a href="javascript:;" v-if="item.spread" @click="item.spread=false"><b>^ 收起 ^</b></a>
                                    <a href="javascript:;" v-else @click="item.spread=true">展开..</a>
                                </small>
                            </td>
                            <td>
                                <small>{{dateFormat(item.createTime*10000,'y-m-d h:i')}}</small>
                            </td>
                            <td>
                                <select>
                                    <option :value="i" v-for="(st,i) in statusTips" :checked="i==item.status">{{st}}</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <pagination ref="pageView"></pagination>
            </div>
        </div>
    </div>
</div>

<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#main',
        data: {
            offset: 0,
            uid: '[[${session.uid}]]',
            pid: '[[${pid}]]',
            keyword: '',
            status: 0,
            dataList: [],
            statusTips: {1: '新答卷', 2: '已阅读', 3: '已废弃', 4: '精选'},
            statusStyles: {1: 'orange', 2: 'green'},
            allCount: 0,
            editMode: false
        },
        components: {
            pagination: Pagination
        },
        watch: {
            keyword: function () {
                vue.offset = 0;
                vue.loadList();
            }
        },
        methods: {
            init: function () {
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function (page) {
                    this.offset = (page - 1) * LIMIT;
                    this.loadList();
                });
                this.loadList();
            },
            loadList: function () {
                let data = {
                    pid: this.pid,
                    keyword: this.keyword,
                    status: this.status,
                    uid: this.uid
                };
                lets.post('/answer/getCount.do', data).then(res => {
                    if (res.code == 1) {
                        this.allCount = res.result;
                        this.$refs['pageView'].setData(res.result, this.offset == 0 ? true : false);
                    }
                });
                data.offset = this.offset;
                data.limit = LIMIT;
                lets.post('/answer/getList.do', data).then(res => {
                    if (res.code == 1) {
                        for (let a of res.result) {
                            let i = 0;
                            for (let ap of a.answers) {
                                ap.num = ++i;
                            }
                            a.spread = false;
                        }
                        this.dataList = res.result;
                    }
                });
            }
        }
    });
    vue.init();
</script>
</body>
</html>